<template>
  <div>
    <Card>
      <vxe-grid
        highlight-hover-row
        show-header-overflow
        show-overflow
        ref="xGrid"
        height="600"
        align="center"
        :columns="tableColumn"
        :data="tableData"
        :toolbar-config="tableToolbar"
        :edit-config="{
          trigger: 'manual',
          mode: 'row',
          showStatus: true,
          icon: 'fa fa-file-text-o',
        }"
      >
        <template #form>
          <Row :gutter="16">
            <Col span="6">
              园区名：
              <Input v-model="formData.park_name" placeholder="请输入内容" />
            </Col>
            <Col span="6">
              地址：
              <Input v-model="formData.address" placeholder="请输入内容" />
            </Col>
          </Row>
        </template>
        <template #toolbar_buttons>
          <Button
            type="primary"
            icon="ios-search"
            style="margin-right: 10px"
            @click="search()"
            >查询
          </Button>
          <Button
            type="primary"
            style="margin-right: 10px"
            icon="md-refresh"
            @click="refreshTable()"
            >刷新
          </Button>
          <Button type="error" style="margin-right: 10px" @click="deleteList()"
            >批量删除
          </Button>
        </template>
        <template #operate="{ row }">
          <Button
            type="primary"
            style="margin-right: 10px"
            @click="editRow(row)"
            >编辑
          </Button>
          <Button
            type="error"
            style="margin-right: 10px"
            @click="deleteRow(row)"
            >删除
          </Button>
        </template>
        <template #pager>
          <div style="text-align: center; padding: 10px">
            <Page
              :current="page.current"
              :total="page.total"
              :page-size="page.pageSize"
              show-elevator
              show-total
              show-sizer
              @on-change="refresh"
            />
          </div>
        </template>
      </vxe-grid>
    </Card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        park_name: "",
        address: "",
      },
      tableToolbar: {
        zoom: true,
        custom: true,
        slots: {
          buttons: "toolbar_buttons",
          tools: "toolbar_tools",
        },
      },
      tableColumn: [
        { type: "checkbox", width: 40, fixed: "left" },
        { field: "park_name", title: "园区名称", width: 120 },
        { field: "brief_introduction", title: "园区简介", width: 200 },
        { field: "contact_details", title: "联系方式", width: 120 },
        { field: "province", title: "省", width: 80 },
        { field: "city", title: "市", width: 80 },
        { field: "area", title: "区", width: 80 },
        { field: "address", title: "详细地址", width: 200 },
        { field: "status", title: "状态", width: 80 },
        { field: "create_time", title: "创建时间", width: 180 },
        { field: "update_time", title: "修改时间", width: 180 },
        {
          title: "操作",
          width: 180,
          slots: { default: "operate" },
          fixed: "right",
        },
      ],
      page: {
        current: 1,
        total: 100,
        pageSize: 10,
      },
      tableData: [
        {
          id: "",
          park_name: "测试园区",
          brief_introduction:
            "这是一个条很长的简介，这是一个条很长的简介，这是一个条很长的简介，这是一个条很长的简介，这是一个条很长的简介",
          contact_details: "15274858582",
          province: "湖南省",
          city: "长沙市",
          area: "天心区",
          address: "中南大学铁道学院",
          status: "1",
          create_time: "2021-04-27 22:11:14",
          update_time: "2021-04-27 22:11:14",
        },
      ],
    };
  },
  methods: {
    search() {
      console.log(row);
    },
    refreshTable() {
      console.log(row);
    },
    deleteList() {
      // 获取选中的数据
      let selectedRecords = this.$refs.xGrid.getCheckboxRecords();
      console.log(selectedRecords);
    },
    editRow(row) {
      console.log(row);
    },
    deleteRow(row) {
      this.$Modal.confirm({
        title: "操作确认",
        content: "您确定要删除\""+row.park_name+"\"吗",
        onOk: () => {
          this.$Message.success("删除成功");
        },
        onCancel: () => {},
      });
    },
  },
};
</script>